<template>
  <view class="category-container">
    <!-- 左侧主分类 -->
    <scroll-view class="main-category" scroll-y>
      <view 
        class="main-category-item" 
        v-for="(item, index) in mainCategories" 
        :key="index"
        :class="{'active': currentMainCategory === index}"
        @click="handleMainCategoryClick(index)"
      >
        <text>{{ item.name }}</text>
      </view>
    </scroll-view>

    <!-- 右侧子分类 -->
    <scroll-view class="sub-category" scroll-y>
      <view class="sub-category-grid">
        <view 
          class="sub-category-item" 
          v-for="(item, index) in currentSubCategories" 
          :key="index"
          @click="handleSubCategoryClick(item)"
        >
          <image :src="item.icon" class="category-icon" mode="aspectFit"/>
          <text class="category-name">{{ item.name }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 主分类数据
const mainCategories = ref([
  { id: 1, name: '美团优选' },
  { id: 2, name: '美食餐饮' },
  { id: 3, name: '休闲娱乐' },
  { id: 4, name: '酒店旅游' },
  { id: 5, name: '交通出行' },
  { id: 6, name: '丽人医美' },
  { id: 7, name: '生活服务' },
  { id: 8, name: '金融服务' },
  { id: 9, name: '福利中心' }
])

// 子分类数据
const subCategories = ref({
  0: [
    { id: 1, name: '全部', icon: '/static/icons/waimai.png' },
    { id: 2, name: '外卖美食', icon: '/static/icons/food.png' },
    { id: 3, name: '甜点饮品', icon: '/static/icons/drink.png' },
    { id: 4, name: '夜宵', icon: '/static/icons/night.png' },
    { id: 5, name: '超市便利', icon: '/static/icons/market.png' },
    { id: 6, name: '品质百货', icon: '/static/icons/xiaoshi.png' },
    { id: 7, name: '买药', icon: '/static/icons/medicine.png' },
    { id: 8, name: '小吃馆', icon: '/static/icons/snack.png' },
    { id: 9, name: '美团专送', icon: '/static/icons/delivery.png' },
    { id: 10, name: '小象超市', icon: '/static/icons/elephant.png' },
    { id: 11, name: '早餐', icon: '/static/icons/breakfast.png' },
    { id: 12, name: '正餐优选', icon: '/static/icons/dinner.png' },
    { id: 13, name: '家常菜', icon: '/static/icons/homefood.png' },
    { id: 14, name: '快食简餐', icon: '/static/icons/fastfood.png' }
  ]
})

const currentMainCategory = ref(0)
const currentSubCategories = computed(() => subCategories.value[currentMainCategory.value] || [])

const handleMainCategoryClick = (index) => {
  currentMainCategory.value = index
}

const handleSubCategoryClick = (category) => {
  emit('category-click', category)
}

const emit = defineEmits(['category-click'])
</script>

<style scoped>
.category-container {
  display: flex;
  height: calc(100vh - 88rpx);
  background-color: #fff;
}

.main-category {
  width: 160rpx;
  height: 100%;
  background-color: #f8f8f8;
}

.main-category-item {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #666;
  position: relative;
  padding: 0 20rpx;
  text-align: center;
  line-height: 1.4;
}

.main-category-item.active {
  background-color: #fff;
  color: #333;
  font-weight: 500;
}

.main-category-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4rpx;
  height: 32rpx;
  background-color: #FF4444;
}

.sub-category {
  flex: 1;
  height: 100%;
  padding: 20rpx 20rpx 0;
  box-sizing: border-box;
  background-color: #fff;
}

.sub-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx 20rpx;
  padding-bottom: 20rpx;
}

.sub-category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.category-icon {
  width: 88rpx;
  height: 88rpx;
  margin-bottom: 12rpx;
}

.category-name {
  font-size: 24rpx;
  color: #333;
  text-align: center;
  line-height: 1.2;
}
</style> 